.carousel {
    width: 100%;
    height: 940px;
    position: relative;
    overflow: hidden;
    
}

.carousel img {
    width: 100%;
    height: 100%;   
    min-height: 800px;
    animation: aniScaleBan 10s linear forwards;
    transform: scale(1.1); /* 初始放大 110% */
    animation: zoomIn 8s ease-out forwards;
    transform-origin: center center; /* 确保从中心开始缩放 */
}

@keyframes zoomIn {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
        opacity: 1;
    }
}
.carousel img.active {
    opacity: 1;
}
.Supply-Chain {
    width: 100%;
    height: 900px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li {
    list-style: none;
}

/* 默认样式 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    font: 14px/1.5 "SF Pro SC","HanHei SC","SF Pro Text","Myriad Set Pro","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
    color: #333;
    background-color: transparent;
    width: 100%;
}
.body {
    width: 100%;
    padding-top: 70px; /* 补偿固定导航栏高度 */
}
a {
    color: #333;
    text-decoration: none;
}
h2, h3 {
    font-weight: normal;
}
img {
    max-width: 100%;
    height: auto;
}

/* 字体大小类 */
.f_14 { font-size: 14px; }
.f_16 { font-size: 16px; }
.f_18 { font-size: 18px; }
.f_20 { font-size: 20px; }
.f_22 { font-size: 22px; }
.f_42 { font-size: 42px; }
.f_46 { font-size: 46px; }

/* 字体粗细类 */
.hb { font-weight: bold; }
.hm { font-weight: 500; }
.gb { font-weight: 600; }

/* 辅助类 */
.pc_only { display: block; }
.m_only { display: none; }

/* IP_4 主要样式 */
.ip_4 {
    width: 100%;
    height: 300vh;
    position: relative;
}

.ip_4 .title {
    white-space: nowrap;
}

.ip_4 .round {
    position: sticky;
    top: 0;
    background-color: #fff;
    height: 100vh;
    overflow: hidden;
}

.ip_4 .round .inner {
    clip-path: circle(100% at 50% 50%);
    height: 100vh;
    position: relative;
    z-index: 2;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ip_4 .round .inner.ani {
    transition: all 1s;
    clip-path: circle(20.9% at 78.8% 56.5%) !important;
}

.ip_4 .round .inner .change {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 60px));
    width: min(636px, 90vw);  /* 使用min()函数限制最大宽度 */
    height: min(636px, 90vw);  /* 使用min()函数限制最大高度 */
    object-fit: cover;
    opacity: 0;
    z-index: -9;
    transition: all 0.5s;
    border-radius: 50%;
    overflow: hidden;
    clip-path: circle(50% at center);  /* 使用clip-path确保只显示圆形区域 */
}

.ip_4 .round .inner .change img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: all 0.5s ease;
    clip-path: circle(50% at center);  /* 图片也使用clip-path裁剪 */
}

.ip_4 .round .inner.ani .change {
    border: 23px solid #fff; /* 1.2vw -> 23px */
}

.ip_4 .round .inner .change.act {
    transform: translate(calc(15%), calc(-40%)); /* 28.65vw -> 550px, 3.13vw -> 60px */
    opacity: 1;
    z-index: 999;
    transition: all 1s;
}

.ip_4 .round .inner.act {
    opacity: 1;
}

.ip_4 .part1 {
    height: 100vh;
    padding: 256px 0 90px; /* 26.7vh -> 256px, 9.42vh -> 90px */
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}

.ip_4 .part1.act {
    opacity: 1;
}

.ip_4 .bgimg {
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s;
}

.ip_4 .bgimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}

.ip_4 .part1 .text {
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    z-index: 2;
}

.ip_4 .part1 .text .title {
    margin-bottom: 60px; /* 3.13vw -> 60px */
    text-align: center;
}

.ip_4 .part1 .text .more {
    margin: 0 auto;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 30px;
    display: inline-block;
    transition: all 0.3s;
}

.ip_4 .part1 .text .more:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.ip_4 .part1 .text .more span i {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/%3E%3C/svg%3E");
    background-size: contain;
    vertical-align: middle;
}

.ip_4 .part1 .list {
    display: flex;
    align-items: center;
}

.ip_4 .part1 .list .item {
    margin-right: 72px; /* 3.75vw -> 72px */
    width: 87px; /* 4.53vw -> 87px */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ip_4 .part1 .list .item:last-child {
    margin-right: 0;
}

.ip_4 .part1 .list .item .icon {
    margin-bottom: 28px; /* 1.46vw -> 28px */
    width: 87px; /* 4.53vw -> 87px */
    height: 101px; /* 5.26vw -> 101px */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ip_4 .part1 .list .item .icon img {
    width: 50%;
    position: relative;
    z-index: 2;
}

.ip_4 .part1 .list .item .icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
}

.ip_4 .part1 .list .item:hover .icon::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='rgba(255,255,255,0.1)' stroke='rgba(255,255,255,0.5)' stroke-width='2'/%3E%3C/svg%3E");
    opacity: 0.3;
}

.ip_4 .part1 .list .item .tit {
    white-space: nowrap;
}

.ip_4 .part2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

.ip_4 .part2 .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url("https://picture-xinjuhang.oss-cn-beijing.aliyuncs.com/uploads/images/Exclusive-Line-Logistics/r4bg.png");
    background-size: auto 100%;
    background-position: right top;
    transition: all 0.5s 0.2s;
    opacity: 0;
    transform: translateY(100%);
    background-repeat: no-repeat; /* 添加这一行防止图片重复 */
}

.ip_4 .part2 .text {
    height: 100%;
    background-image: url("https://picture-xinjuhang.oss-cn-beijing.aliyuncs.com/uploads/images/Exclusive-Line-Logistics/r4bg2.png");
    background-size: auto 343px; /* 17.86vw -> 343px */
    background-position: left bottom;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 80px; /* 4.17vw -> 80px */
    position: relative;
    z-index: 2;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(100%);
    background-repeat: no-repeat; /* 添加这一行防止图片重复 */
}

.ip_4 .part2.act .text,
.ip_4 .part2.act .bg {
    opacity: 1;
    transform: translateY(0%);
}

.ip_4 .part2 .text .title {
    margin-bottom: 97px; /* 5.05vw -> 97px */
    color: #333;
}

.ip_4 .part2 .text .list {
    margin-bottom: 73px; /* 3.8vw -> 73px */
    width: 800px;
    display: flex;
}

.ip_4 .part2 .text .list .item {
    margin-right: 50px; /* 6.51vw -> 125px */
}

.ip_4 .part2 .text .list .item .top {
    color: #c30d23;
    display: flex;
    align-items: flex-end;
}

.ip_4 .part2 .text .list .item .top .unit {
    line-height: 1.8;
    margin-left: 16px; /* 0.83vw -> 16px */
}

.ip_4 .part2 .text .list .item .top .unit.add {
    transform: translateY(-11px); /* -0.57vw -> -11px */
}

.ip_4 .part2 .text .con {
    margin-bottom: 71px; /* 3.7vw -> 71px */
    width: 855px; /* 44.53vw -> 855px */
    color: #666666;
    /* line-height: 2;
    white-space: nowrap; */
}

.ip_4 .part2 .text .more.black {
    color: #333;
    border: 1px solid #333;
    padding: 10px 20px;
    border-radius: 30px;
    display: inline-block;
    transition: all 0.3s;
    width: fit-content;
}

.ip_4 .part2 .text .more.black:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.ip_4 .part2 .text .more.black span i {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333333' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/%3E%3C/svg%3E");
    background-size: contain;
    vertical-align: middle;
}
.Earth-image {
    width: 100%;
    
}

  
  /* 现代浏览器方案 */
  :target {
    scroll-margin-top: var(--nav-height);
  }
  
  /* 传统浏览器兼容方案 */
  :target::before {
    content: "";
    display: block;
    height: var(--nav-height);
    margin-top: calc(-1 * var(--nav-height));
    visibility: hidden;
  }
  
  /* 响应式适配 */
  @media (max-width: 768px) {
    :root {
        --nav-height: 60px;
    }
  }

/* 响应式媒体查询 */
/* 大屏幕设备 (1920px及以上) */
@media screen and (min-width: 1920px) {
    .carousel {
        height: 940px;
    }
    
    .ip_4 .round .inner .change {
        width: 636px;
        height: 636px;
    }
    .ip_4 .round .inner .change img{
        width: 100%;
    }
    .ip_4 .part1 .text .title {
        font-size: 42px;
    }
    
    .ip_4 .part2 .text .title {
        font-size: 42px;
    }
    .ip_4 .part1 .text .more{
        font-size: 18px;
    }
}

/* 中等屏幕设备 (1440px - 1919px) */
@media screen and (max-width: 1919px) and (min-width: 1440px) {
    .carousel {
        height: 100vh;
    }
    .ip_4 .round .inner .change.act{
        transform: translate(calc(20%), calc(-40%));
    }
    .ip_4 .round .inner .change.act img{
        width: 100%;
    }
    .ip_4 .round .inner .change {
        width: 620px;
        height: 620px;
    }
    .ip_4 .part2 .text .con{
        width: 80%;
    }
    .ip_4 .part1 .text .title {
        font-size: 38px;
    }
    
    .ip_4 .part2 .text .title {
        font-size: 38px;
    }
}
@media screen and (max-width: 1052px) {
    .ip_4 .bgimg{
        opacity: 1 ;
    }
    .ip_4 .part1 .text .title{
        opacity: -1 !important;
    }
}
/* 小屏幕设备 (1024px - 1439px) */
@media screen and (max-width: 1439px) and (min-width: 1024px) {
    .carousel {
        height: 100vh;
    }
    .ip_4 .bgimg{
        opacity: -1;
    }
    .ip_4 .part2 .text .con{
        width: 60%;
    }
    .ip_4 .round .inner .change {
        width: 600px;
        height: 600px;
    }
    .ip_4 .round .inner .change.act{
        transform: translate(calc(15%), calc(-40%));
    }
    .ip_4 .part1 .text .title {
        font-size: 34px;
    }
    
    .ip_4 .part2 .text .title {
        font-size: 34px;
    }
    

}
@media screen and (max-width: 1300px) {
    .ip_4 .round .inner .change.act{
        transform: translate(calc(10%), calc(-40%));
    }

}
@media screen and (max-width: 1200px) {
    .ip_4 .round .inner .change.act{
        transform: translate(calc(0%), calc(-40%));
    }

}
@media screen and (max-width: 1020px) {
    .ip_4 .round .inner .change.act{
        transform: translate(calc(55%), calc(-40%));
    }

}
/* 平板设备 (768px - 1023px) */
@media screen and (max-width: 1023px) and (min-width: 768px) {
    .carousel {
        height: 90vh;
        /* margin-top: -60px; */
    }
    
    .carousel h2 {
        font-size: 2.5rem;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .carousel .subtitle {
        font-size: 60px;
        text-align: center;
    }
    
    .ip_4 .round .inner .change {
        width: min(300px, 80vw);
        height: min(300px, 80vw);
    }
    
    .ip_4 .part1 .text .title {
        font-size: 32px;
        text-align: center;
    }
    
    .ip_4 .part2 .text {
        padding-left: 40px;
    }
    
    .ip_4 .part2 .text .title {
        font-size: 32px;
        text-align: left;
    }
    
    .ip_4 .part2 .text .con {
        width: 500px;
        font-size: 16px;
    }
    .ip_4 .part2 .text .con p{
        width: 100%;
        font-size: 16px;
    }
    .ip_4 .part2 .text .list {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    
    .ip_4 .part2 .text .list .item {
        margin: 10px;
    }
}
@media screen and (max-width: 580px) {
    .ip_4 .round .inner .change.act{
        margin-left: -10px;
    }
}
/* 手机设备 (480px - 767px) */
@media screen and (max-width: 767px) and (min-width: 481px) {
    .carousel {
        height: 80vh;
        /* margin-top: -50px; */
    }
    .ip_4 .part2 .text .list{
        width: 500px;
    }
    .ip_4 .round .inner .change.act{
        transform: translate(calc(55%), calc(-40%));
    }
    .carousel h2 {
        font-size: 2rem;
        width: 90%;
        text-align: center;
    }
    
    .carousel .subtitle {
        font-size: 36px;
        width: 95%;
    }
    
    .ip_4 .round .inner .change {
        width: min(250px, 70vw);
        height: min(250px, 70vw);
    }
    
    .ip_4 .part1 .text .title {
        font-size: 28px;
        text-align: center;
    }
    
    .ip_4 .part2 .text {
        padding: 0 15px;
    }
    
    .ip_4 .part2 .text .title {
        font-size: 28px;
        text-align: left;
    }
    
    .ip_4 .part2 .text .con {
        width: 50%;
        font-size: 16px;
        line-height: 1.6;
    }
    
    .ip_4 .part2 .text .list {
        flex-wrap: wrap;
        justify-content: center;
        
    }
    
    .ip_4 .part2 .text .list .item {
        margin: 10px;
    }
    
    .ip_4 .part2 .text .list .item .num {
        font-size: 36px;
    }
    
    .ip_4 .part2 .text .list .item .unit {
        font-size: 18px;
    }
    
    .ip_4 .part2 .text .list .item .tit {
        font-size: 14px;
    }
}
@media screen and (max-width: 480px) {
    .ip_4 .round .inner .change.act{
       
        margin-top: 100px;
    }
}
@media screen and (max-width: 980px) {
    .ip_4 .round .inner .change.act{
        transform: translate(calc(55%), calc(-40%));
        margin-left: -100px;
}
}
/* 小屏手机设备 (480px以下) */
@media screen and (max-width: 480px) {
    .carousel {
        height: 400px;
        margin-top: -40px;
    }
    
    .carousel h2 {
        font-size: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .carousel .subtitle {
        font-size: 30px;
        text-align: center;
    }
    
    .ip_4 .round .inner .change {
        width: 200px;
        height: 200px;
    }
    
    .ip_4 .part1 .text .title {
        font-size: 24px;
        text-align: center;
    }
    
    .ip_4 .part2 .text {
        padding-left: 15px;
    }
    
    .ip_4 .part2 .text .title {
        font-size: 24px;
        text-align: left;
    }
    
    .ip_4 .part2 .text .con {
        width: 100%;
        font-size: 14px;
        line-height: 1.5;
    }
    
    .ip_4 .part2 .text .list {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    
    .ip_4 .part2 .text .list .item {
        margin: 10px 20px 10px 0;
    }
    
    .ip_4 .part2 .text .list .item .num {
        font-size: 32px;
    }
    
    .ip_4 .part2 .text .list .item .unit {
        font-size: 16px;
    }
    
    .ip_4 .part2 .text .list .item .tit {
        font-size: 12px;
    }
}

/* 显示/隐藏元素控制 */
@media screen and (max-width: 1023px) {
    .pc_only {
        display: none !important;
    }
    
    .m_only {
        display: block !important;
    }
    
    .ip_4 .round .inner.ani {
        clip-path: circle(30% at 78.8% 56.5%) !important;
    }
}

@media screen and (min-width: 1024px) {
    .pc_only {
        display: block !important;
    }
    
    .m_only {
        display: none !important;
    }
    
    .ip_4 .round .inner.ani {
        clip-path: circle(20.9% at 78.8% 56.5%) !important;
    }
}

/* 添加文字动画效果 */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 优化轮播图文字动画 */
.carousel h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 4vw !important;
    line-height: 1.1;
    text-align: center;
    font-weight: bold;
    z-index: 2;
    animation-delay: 0.5s;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
    letter-spacing: 2px;
    width: 90vw;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    word-break: break-all;
}

.carousel .subtitle,
.carousel p.subtitle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* color: rgba(255, 255, 255, 0.8); */
    font-size: 8vw !important;   /* 视口宽度的6%，随屏幕缩放 */
    line-height: 1.1;
    text-align: center;
    max-font-size: 110px;
    min-font-size: 18px;
    font-weight: bold;
    opacity: 0;
    animation: fadeIn 1.5s ease-out forwards;
    animation-delay: 0.8s;
    text-shadow: 2px 2px 4px rgba(189, 189, 189, 0.3);
}

/* 限制最大最小值，防止极端屏幕下过大或过小 */
@media (max-width: 480px) {
    .carousel h2 {
        font-size: 22px !important;
    }
    .carousel .subtitle,
    .carousel p.subtitle {
        font-size: 40px !important;
    }
}
@media (min-width: 1920px) {
    .carousel h2 {
        font-size: 70px !important;
    }
    .carousel .subtitle,
    .carousel p.subtitle {
        font-size: 110px !important;
    }
}

/* 优化动画过渡效果 */
.ip_4 .round .inner {
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ip_4 .part2 .text,
.ip_4 .part2 .bg {
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}